<template>
  <a-modal
    title-align="start"
    width="1000px"
    :title="`详细-${currentProcess?.processName}`"
    :visible="startFlowVisible"
    @cancel="startFlowVisible = false"
  >
    <a-scrollbar style="max-height:650px; overflow: auto;">
      <form-render
        v-if="startFlowVisible"
        ref="startFlowFormRef"
        v-model:model="formModel"
        :form-config="formConfig"
        :form-list="formList"
        :form-permission="formPermission"
      />
    </a-scrollbar>
    <template #footer>
      <a-row justify="end">
        <a-button-group>
          <a-button :disabled="loading" @click="cancel">
            取消
          </a-button>
          <a-button type="primary" status="warning" :loading="loading" @click="draft">
            {{ currentInstance.instanceId ? '保存' : '存为草稿' }}
          </a-button>
          <a-button type="primary" :loading="loading" @click="start">
            发起流程
          </a-button>
        </a-button-group>
      </a-row>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { detailForm } from '@/api/system/form';
import { detailProcess, FlowProcess } from '@/api/flow/process';
import { draftFlow, startFlow, FlowInstance } from '@/api/flow/instance';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import FormRender from '@/components/form-render/index.vue';

const emits = defineEmits(['submit']);

const { loading, setLoading } = useLoading(false);

const startFlowVisible = ref(false);

const currentInstance = ref<FlowInstance>({});

const currentProcess = ref<FlowProcess>({});

const startFlowFormRef = ref();

const formModel = ref({});

const formConfig = ref();

const formList = ref();

const formPermission = ref();

const draft = () => {
  if (currentProcess.value?.processKey && currentProcess.value?.processId) {
    const data = {
      instanceId: currentInstance.value?.instanceId,
      processId: currentProcess.value.processId,
      processKey: currentProcess.value.processKey,
      formModel: formModel.value
    };
    draftFlow(data).then(res => {
      Message.success('操作成功');
      emits('submit');
      cancel();
    });
    return;
  }
  Message.error('流程Key或流程Id为空');
};

const validateSuccessCallBack = () => {
  if (currentProcess.value?.processKey && currentProcess.value?.processId) {
    const data = {
      instanceId: currentInstance.value?.instanceId,
      processId: currentProcess.value.processId,
      processKey: currentProcess.value.processKey,
      formModel: formModel.value
    };
    startFlow(data).then(res => {
      Message.success('操作成功');
      emits('submit');
      cancel();
    });
    return;
  }
  Message.error('流程Key或流程Id为空');
};

const validateFailCallBack = () => {
  Message.error('表单校验失败');
};

const start = () => {
  startFlowFormRef.value.validateFormField(validateSuccessCallBack, validateFailCallBack);
};

const open = (record: FlowInstance) => {
  if (!record.processId) {
    Message.warning('流程Id为空');
    return;
  }
  currentInstance.value = record;
  formModel.value = record.formModel;
  detailProcess(record.processId).then(res => {
    currentProcess.value = res.data;
    const { nodeList } = res.data;
    nodeList.forEach(node => {
      if (node.nodeType === 'node_start') {
        formPermission.value = node.nodeConfig.data.formPermission;
      }
    });
    if (res.data.formId) {
      detailForm(res.data.formId).then(formRes => {
        formConfig.value = formRes.data.formConfig;
        formList.value = formRes.data.formList;
        if (!formPermission.value) {
          formPermission.value = formRes.data.formPermission;
        }
        startFlowVisible.value = true;
        nextTick(() => {
          startFlowFormRef.value.clearValidate();
        });
      });
    }
  });
};

const cancel = () => {
  startFlowVisible.value = false;
};

defineExpose({
  open,
  cancel
});

</script>

<script lang="ts">
export default {
  name: 'DialogStart'
};
</script>

<style scoped lang="less">

</style>